<template>
    <el-container class="home-container">
        <!-- 头部 -->
      <el-header>
          <div>
            <img class="img" src="../assets/logo.png" alt="">
            <span>工作量后台管理系统</span>
          </div>
          <button>退出</button>
      </el-header>
      <el-container>
        <!-- 菜单导航 -->
        <el-aside width="200px"><Aside></Aside></el-aside>
        <!-- 详细信息 -->
        <el-main><router-view></router-view></el-main>
      </el-container>
      <!-- 分页 -->
       <!-- 分页导航区域 
        @size-change(pagesize改变时触发) 
        @current-change(页码发生改变时触发)
        :current-page(设置当前页码)
        :page-size(设置每页的数据条数)
        :total(设置总页数) -->
    </el-container>
    
</template>
<script>
import Aside from '../components/Aside.vue'
export default {
    
    components:{
        Aside
    }
};
</script>
<style lang="scss" scoped>
    .home-container{
        height: 100%;
    }
    .el-header{
        height: 100%;
        background-color:#373D41;
        display: flex;
        justify-content:space-between;
        align-items: center;
        color: white;
        padding-left: 0px;
        font-size: 18px;
        > div{
            display: flex;
            align-items: center;
            .img{
            height: 40px;
            width: 40px;
        }
        } 
    }
    .el-aside{
        height: 100%;
        background-color:#03ff75;
    }
    .el-main{
        height: 100%;
        background-color:#f800ec;
    }
</style>